<template>
		
	<view class="comunity">
		<view class="body">
			<!-- 搜索栏 -->
			<view class="search">
				
				<uni-search-bar  
				v-model="searchValue" 
				@confirm="search" 
				@input="input" 
				bgColor="#DDC7E5" 
				clearButton="auto"
				cancelButton="auto"
				@focus="focus"
				:radius="50" 
				placeholder="搜索感兴趣的话题，用户等">
					<!-- 替换组件的搜索图标 -->
					<template v-slot:searchIcon>
							<!-- <image src="@/common/images/Black.png" mode="aspectFill"></image> -->
							<uni-icons type="medal" size="30"></uni-icons>
					</template>
				</uni-search-bar>
			</view>
			<!-- 中间标签部分 -->
			<view class="box">
				<view class="tagbox" @click="box1">附近</view>
				<view class="tagbox" @click="box2">同城</view>
				<view class="tagbox" @click="box3">商城</view>
				<view class="tagbox" @click="box4">关注</view>
			</view>
			<!-- 浏览区部分 -->
			<view class="browse">
				<!-- <browsePage></browsePage> -->
				<CommunityBrowse :searchValue="searchValue" :box="boxValue"></CommunityBrowse>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import {ref} from "vue";
const searchValue=ref("")
// const searchValue=ref("")
const boxValue=ref(0)
const search=(e)=>{
	// uni.showToast({
	// 	title:`${e.value}`,
	// 	icon:"none"
	// })
	searchValue.value=e.value
	console.log("父组件",searchValue.value)
	// 搜索完毕，清空？
}
const input=(e)=>{
	
}
const focus=(e)=>{s
	// 当聚焦就传递初始化值
	boxValue.value=0;
}
// 点击传送不一样的参数
const box1=()=>{
	boxValue.value=1
	// uni.showToast({
	// 	title:`${e.value}`,
	// 	icon:"none"
	// })
}
const box2=()=>{
	boxValue.value=2
	// uni.showToast({
	// 	title:`${boxValue.value}`,
	// 	icon:"none"
	// })
}
const box3=()=>{
	boxValue.value=3
	// uni.showToast({
	// 	title:`${e.value}`,
	// 	icon:"none"
	// })
}
const box4=()=>{
	boxValue.value=4
	// uni.showToast({
	// 	title:`${boxValue.value}`,
	// 	icon:"none"
	// })
}



</script>
<style lang="scss" scoped>
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
}
.comunity{
	background: linear-gradient(179deg, rgba(98, 29, 243, 0.17) 3.57%, rgba(255, 125, 125, 0.10) 12.6%, rgba(255, 140, 140, 0.11) 22.62%, rgba(255, 255, 255, 0.20) 98.13%), radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	padding:10rpx ;
	.body{
		// 搜索栏样式
		.search{
			marign:24rpx 30rpx;
		}
		// 标签样式
		.box{
			margin-left:30rpx;
			margin-right:30rpx;
			// padding:0rpx 30rpx 10rpx 30rpx;
			padding-bottom:20rpx;
			display:grid;
			grid-template-columns: repeat(4,1fr);
			gap: 90rpx;
			// border:1rpx solid #000;
			.tagbox{
				display:flex;
				align-items:center;
				justify-content:center;
				width:88rpx;
				height:50rpx;
				border-radius: 26rpx;
				background: #E0C8EB;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
				color: #000;
				font-family: "Noto Sans SC";
				font-size: 27rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;


			}
		}
		// 浏览区样式
	}
}
</style>
